import React, { useState } from 'react';
import { Card, Form, Input, Button, Radio, Space, Descriptions } from 'antd';
import { ArrowLeftOutlined, SaveOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom';
import './styles.css';

interface UserDetailData {
  id: string;
  username: string;
  nickName: string;
  email: string;
  phoneNumber: string;
  companyName: string;
  companyNumber: string;
  password: string;
  status: string;
}

// 模拟数据
const mockDetail: UserDetailData = {
  id: 'USER001',
  username: 'zhangsan',
  nickName: '张三',
  email: 'zhangsan@example.com',
  phoneNumber: '13800138000',
  companyName: '北京科技有限公司',
  companyNumber: '91110000123456789A',
  password: '******',
  status: 'enabled'
};

const UserDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const [detail, setDetail] = useState(mockDetail);
  const [isEditing, setIsEditing] = useState(!id);

  const handleBack = () => {
    navigate(-1);
  };

  const handleEdit = () => {
    setIsEditing(true);
    form.setFieldsValue(detail);
  };

  const handleSave = () => {
    form.validateFields().then(values => {
      console.log('保存用户:', values);
      setIsEditing(false);
      // 更新详情数据
      setDetail({ ...detail, ...values });
    });
  };

  const handleCancel = () => {
    setIsEditing(false);
    form.resetFields();
  };

  return (
    <div className="user-detail-container">
      <Card
        title={
          <Space>
            <Button type="link" icon={<ArrowLeftOutlined />} onClick={handleBack}>
              返回
            </Button>
            <span>{id ? '编辑用户' : '新增用户'}</span>
          </Space>
        }
        extra={
          <Space>
            {!isEditing ? (
              <Button type="primary" icon={<SaveOutlined />} onClick={handleEdit}>
                编辑
              </Button>
            ) : (
              <>
                <Button onClick={handleCancel}>取消</Button>
                <Button type="primary" icon={<SaveOutlined />} onClick={handleSave}>
                  保存
                </Button>
              </>
            )}
          </Space>
        }
        className="detail-card"
      >
        {id && !isEditing ? (
          <Descriptions title="基本信息" bordered>
            <Descriptions.Item label="用户名">{detail.username}</Descriptions.Item>
            <Descriptions.Item label="昵称">{detail.nickName}</Descriptions.Item>
            <Descriptions.Item label="邮箱">{detail.email}</Descriptions.Item>
            <Descriptions.Item label="手机号">{detail.phoneNumber}</Descriptions.Item>
            <Descriptions.Item label="单位名称" span={2}>{detail.companyName}</Descriptions.Item>
            <Descriptions.Item label="统一信用代码" span={3}>{detail.companyNumber}</Descriptions.Item>
            <Descriptions.Item label="状态">
              <Radio.Group value={detail.status} disabled>
                <Radio value="enabled">启用</Radio>
                <Radio value="disabled">停用</Radio>
              </Radio.Group>
            </Descriptions.Item>
          </Descriptions>
        ) : (
          <Form
            form={form}
            layout="vertical"
            initialValues={detail}
            className="user-form"
          >
            <Form.Item
              name="username"
              label="用户名"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
              name="nickName"
              label="昵称"
              rules={[{ required: true, message: '请输入昵称' }]}
            >
              <Input placeholder="请输入昵称" />
            </Form.Item>
            <Form.Item
              name="email"
              label="邮箱"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '请输入正确的邮箱格式' }
              ]}
            >
              <Input placeholder="请输入邮箱" />
            </Form.Item>
            <Form.Item
              name="phoneNumber"
              label="手机号"
              rules={[
                { required: true, message: '请输入手机号' },
                { pattern: /^1\d{10}$/, message: '请输入正确的手机号格式' }
              ]}
            >
              <Input placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
              name="companyName"
              label="单位名称"
              rules={[{ required: true, message: '请输入单位名称' }]}
            >
              <Input placeholder="请输入单位名称" />
            </Form.Item>
            <Form.Item
              name="companyNumber"
              label="统一信用代码"
              rules={[{ required: true, message: '请输入统一信用代码' }]}
            >
              <Input placeholder="请输入统一信用代码" />
            </Form.Item>
            {!id && (
              <Form.Item
                name="password"
                label="密码"
                rules={[{ required: true, message: '请输入密码' }]}
              >
                <Input.Password placeholder="请输入密码" />
              </Form.Item>
            )}
            <Form.Item
              name="status"
              label="状态"
              rules={[{ required: true, message: '请选择状态' }]}
            >
              <Radio.Group>
                <Radio value="enabled">启用</Radio>
                <Radio value="disabled">停用</Radio>
              </Radio.Group>
            </Form.Item>
          </Form>
        )}
      </Card>
    </div>
  );
};

export default UserDetail; 